<template>
  <el-popover
    class="confirm-button"
    placement="top"
    width="160"
    v-model="visible"
  >
    <slot name="content"></slot>
    <div style="text-align: right;">
      <el-button :type="okButtonType || $attrs.type || 'primary'" plain size="mini" @click="onOk">确定</el-button>
      <el-button type="default" size="mini" @click="onCancel">取消</el-button>
    </div>
    <el-tooltip v-if="tooltip" slot="reference" :content="tooltip.content">
      <el-button
        plain
        :style="{width: $attrs.width}"
        v-bind="$attrs"
        @click.stop
      >
        <slot></slot>
      </el-button>
    </el-tooltip>
    <el-button
      v-else
      slot="reference"
      plain
      :style="{width: $attrs.width}"
      v-bind="$attrs"
      @click.stop
    >
      <slot></slot>
    </el-button>
  </el-popover>
</template>

<script>
export default {
  name: 'confirm-button',
  inheritAttrs: false,
  props: {
    tooltip: {
      type: Object
    },
    okButtonType: {
      type: String
    }
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    onOk() {
      this.$emit('ok');
      this.visible = false;
    },
    onCancel() {
      this.$emit('cancel');
      this.visible = false;
    }
  }
}
</script>

<style scoped>
.confirm-button >>> .el-button--text:focus {
  border-color: transparent !important;
  background: transparent !important;
}
.confirm-button >>> .el-button--text:hover {
  border-color: transparent !important;
  background: transparent !important;
}
</style>
<style>
.el-button+.confirm-button {
  margin-left: 10px;
  margin-right: 10px;
}
</style>